<template>
    <div class="box" :class="`box ${ isOn ? '' : 'off'}`">
        <div @click="handle" :class="`circle ${ isOn ? '' : 'off'}`"></div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                isOn: true,
            };
        },
        methods: {
            handle () {
                this.isOn = !this.isOn;
            }
        }
    };
</script>

<style scoped>
    .box {
        width: 200px;
        height: 100px;
        border-radius: 50px;
        padding: 8px;
        box-sizing: border-box;
        background-color: blue;
    }
    .circle {
        float: right;
        width: 84px;
        height: 84px;
        border-radius: 42px;
        background-color: rgb(213, 138, 228);
        transition: transform .3s ease, width .3s ease;
    }
    /* 外框关闭状态下的颜色 */
    .box.off {
        background-color: #ccc;
    }
    /* 按钮在左侧的样式 */
    .circle.off {
        transform: translateX(-100px);
    }
    /* 鼠标按下时的圆 */
    .box:active .circle {
        width: 100px;
    }
    /* 激活状态下的圆 */
    .box:active .circle.off {
        transform: translateX(-84px);
    }
</style>